<template>
  <div style="width: 100%;">
    <ag-grid-vue :style="{width: '100%', height, minHeight: '400px'}" class="ag-theme-alpine" :id="dataId"
                 :tooltipShowDelay="tooltipShowDelay"
                 :grid-options="gridOptions"
                 :rowSelection="rowSelection"
                 :rowData="defRowData"
                 :suppressRowClickSelection="true"
                 :columnDefs="columnDefs"
                 :modules="modules"
                 :rowDragManaged="rowDragManaged"
                 @updateKey="test"
                 :animateRows="animateRows"
                 @row-drag-end="rowDragEnd"
                 @selection-changed="onSelectionChanged"
                 @grid-ready="onReady">
    </ag-grid-vue>
    <el-pagination
        v-if="showPagination"
        style="text-align: right;padding-top:6px "
        class="pagination"
        background
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, prev, pager, next, sizes, jumper"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';
// for community features
import {AllCommunityModules} from '@ag-grid-community/all-modules';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
export default {
    name: 'LargeDataSetExample',
    data () {
        return {
            gridApi: null,
            rowSelection: null,
            rowData: this.rowData,
            modules: AllCommunityModules
        };
    },
    components: {
        'ag-grid-vue': AgGridVue
    },
    props: {
        height: [String, Number],
        pageSizes: {
            type: Array,
            default: () => [20, 50, 100]
        },
        pageSize: {
            type: Number,
            default: 20
        },
        total: {
            type: Number,
            default: 0
        },
        dataId: {
            type: String,
            default: 'myGrid'
        },
        columnDefs: { // 主表表头
            type: Array,
            default: () => []
        },
        resListKey: { // 主表数据key
            type: String,
            default: 'content'
        },
        resPagetionsKey: { // 响应数据的pagetions信息所在层
            type: String,
            default: 'content'
        },
        childColumnDefs: { // 细节表头
            type: Array,
            default: () => []
        },
        childListKey: { // 细节数据key
            type: String,
            default: 'content'
        },
        defRowData: { // 主表格默认数据
            type: Array,
            default: null
        },
        tooltipShowDelay: {
            type: Number,
            default: null
        },
        hasPages: { // 展示分页
            type: Boolean,
            default: true
        },
        isList: { // 是列表
            type: Boolean,
            default: false
        },
        masterDetail: { // 主行
            type: Boolean,
            default: false
        },
        isRowMaster: { // 是否允许扩展
            type: Function,
            default: null
        },
        req: { // 接口请求
            type: Function,
            default: null
        },
        paramsIdKey: { // id主键
            type: String,
            default: ''
        },
        id: { // 搜索id
            type: String,
            default: ''
        },
        showPagination: {
            type: Boolean,
            default: true
        },
        rowDragManaged: {
            type: Boolean,
            default: false
        },
        animateRows: {
            type: Boolean,
            default: false
        },
        isRowCount: { // 添加统计行
            type: Boolean,
            default: false
        },
        rowInfo: { // 统计行信息
            type: Object,
            default: null
        },
        gridOptions: {
            type: Object,
            default: () => {
                return {enableCellTextSelection: true, resizable: true, suppressRowDrag: false};
            }
        },
        editType: { // 可编辑: fullRow 整行编辑
            type: String,
            default: ''
        },
        excelStyles: { // 导出excel样式
            type: Object,
            default: null
        },
        isRowSelectable: { // 过滤选择
            type: Function,
            default: null
        },
        resCB: { // 请求成功回调
            type: Function,
            default: null
        },
        onRowSelected: { // 选中回调
            type: Function,
            default: null
        },
        onChildRowSelected: { // 选中回调
            type: Function,
            default: null
        },
        onRowDoubleClicked: { // 双击回调
            type: Function,
            default: null
        },
        onRowGroupOpened: { // 展开收起事件
            type: Function,
            default: null
        },
        isDetailLazy: { // 子表是否懒加载
            type: Boolean,
            default: false
        }
    },
    beforeMount () {
        this.rowSelection = 'multiple';
    },
    created () {},
    methods: {
        test () {
            console.log(121212);
        },
        onReady (params) {
            this.gridApi = params.api;
            params.api.sizeColumnsToFit();
        },
        onSelectionChanged () {
            const selectedRows = this.gridApi.getSelectedRows();
            const ids = selectedRows.map(res => res.id);
            this.$emit('select-changed', ids);
        },
        handleCurrentChange (val) {
            this.$emit('current-change', val);
        },
        handleSizeChange (val) {
            this.$emit('size-change', val);
        },
        rowDragEnd (event) {
            var itemsToUpdate = [];

            this.gridApi.forEachNodeAfterFilterAndSort(function (rowNode) {
                itemsToUpdate.push(rowNode.data);
            });

            this.$emit('update', itemsToUpdate);
        }
    }
};
</script>
